<template>
  <div class="item" :title="title" @click="onSelect">
    <el-card v-bind:class="{ active: activeid === id }" shadow="hover">
      {{title}}
      <div v-show="id != 0" class="menu">
        <el-button type="primary" @click.stop="onUpdateDelete('update')" icon="el-icon-edit" circle size="mini"></el-button>
        <el-button type="danger" @click.stop="onUpdateDelete('delete')" icon="el-icon-delete" circle size="mini"></el-button>
      </div>
    </el-card>

  </div>
</template>

<script>
export default {
  name: "TeamRoleItem",
  props: ["title", "id", "activeid"],
  data() {
    return {};
  },
  methods: {
    onSelect() {
      this.utils.emit("event_team_role_select_menu_item", {
        id: this.id,
      });
    },
    onUpdateDelete(action) {
      this.utils.emit("event_team_role_update_delete", {
        title: this.title,
        id: this.id,
        action,
      });
    },
  },
  mounted() {},
};
</script>

<style>
#team-root-role-roles-panel .item {
  margin-bottom: 5px;
  color: #606266 !important;
  cursor: pointer;
}

#team-root-role-roles-panel .active {
  border-bottom: solid 3px #409eff;
}

#team-root-role-roles-panel .item .el-card__body {
  padding: 10px;
}

#team-root-role-roles-panel .item .menu {
  position: relative;
  margin-top: -20px;
  text-align: right;
  display: none;
}

#team-root-role-roles-panel .item:hover .menu {
  display: block;
}

#team-root-role-roles-panel .item .menu .el-button--mini.is-circle {
  padding: 3px;
}

#team-root-role-roles-panel .item .menu .el-button + .el-button {
  margin-left: 0px;
}
</style>

